<template>
<div class="u-panel">
  <div class="headers-box">
    <div class="header-box" :class="getActiveStyle(v)" @click="getActive(v)" v-for="(k, v) in dims.STAR_COMMENT_TARGET">
      <p>{{ k }}</p>
    </div>
  </div>
  <div v-if="dataList && dataList.length > 0" class="cmts-box">
    <batch-opr :indeterminateFlag="isIndeterminate" :checkAll="checkAll" @batchDel="del" @handleAllCheck="handleAllCheck" />
    <el-checkbox-group v-model="selectIds" @change="handleCheckedChange">
      <el-checkbox :label="item.id" :key="item.id" class="cmt-box" v-for="(item) in dataList">
        <div class="note-box" @click="read(item)">
          <span> {{ item.note }}</span>
        </div>
        <div class="status-box">
          <el-tag :type="getTagType(item.status)">
            {{ dims.DEAL_WITH_STATUS[item.status] }}
          </el-tag>
        </div>
        <div class="time-box">
          {{ item.createTime }}
        </div>
      </el-checkbox>
    </el-checkbox-group>
  </div>
  <div class="cmts-box" v-else>
    <div class="c-no-data">
      暂无数据
    </div>
  </div>
</div>
</template>

<script>
import batchOpr from '@/components/batch-opr'
export default {
  name: 'u-comments',
  data() {
    return {
      dims: sa.$sys.getCurd(),
      type: '1',
      dataList: [],
      selectIds: [],
      checkAll: false,
      isIndeterminate: false
    }
  },
  components: {
    batchOpr
  },
  created: function () {
    this.f5()
  },
  methods: {
    // 我的评论
    f5() {
      sa.ajax('/my/comments/' + this.type, function (res) {
        this.dataList = res.data;
      }.bind(this), {
        type: 'get'
      });
    },
    // 动态获取标签
    getActiveStyle(key) {
      return this.type === key ? 'is_active' : ''
    },

    // 切换标签
    getActive(key) {
      this.type = key
    },

    // 获取标签样式
    getTagType(status) {
      if (status === -1) {
        return 'info'
      } else if (status === 0) {
        return 'primary'
      } else if (status === 1) {
        return 'success'
      } else {
        return 'danger'
      }
    },
    // 详情
    read(item) {
      let data = {
        id: item.id,
        note: item.note,
        createTime: item.createTime,
        // 状态字典code        
        statusCode: 'DEAL_WITH_STATUS',
        status: item.status
      }
      let label = this.dims.STAR_COMMENT_TARGET[this.type] + '详情'
      sa.showModel(label, () => import('./detail/index'), data);
    },
    // 删除
    del() {
      if (this.selectIds.length <= 0) {
        sa.msg("请选择至少一条数据！")
        return
      }
      sa.confirm('是否删除，此操作不可撤销', function () {
        sa.ajax("/comments/deleteByIds", {
          ids: this.selectIds
        }, function (_res) {
          this.f5();
        }.bind(this), {
          type: 'post'
        })
      }.bind(this));
    },

    // 全选
    handleAllCheck() {
      if (this.checkAll) {
        this.selectIds = []
      } else {
        this.dataList.forEach(item => {
          this.selectIds.push(item.id)
        })
      }
      this.checkAll = !this.checkAll
      this.isIndeterminate = this.checkall;
    },
    // 处理选中
    handleCheckedChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.dataList.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.dataList.length;
    }
  },
}
</script>

<style scoped>
.u-panel {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  height: 100%;
}

.headers-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-radius: 5px;
  height: 100%;
  width: 15%;
}

.header-box {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 100px;
  line-height: 28px;
  padding: 2px 5px;
  border-radius: 5px;
  box-shadow: 0px 0px 6px 0px #dedede;
  cursor: pointer;
  margin: 5px;

  &:hover {
    transition: all 0.5s;
    box-shadow: 0px 0px 2px 0px #a3a2a2;
    cursor: pointer;
    background-color: #004678;
  }
}

.is_active {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #004678;
  color: #fff;
  text-align: center;

  .svg-icon {
    color: rgb(255, 111, 0);
  }
}

.cmts-box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  width: 85%;
  border-radius: 5px;
  overflow: auto;
  padding: 0px 5px;
}

.cmt-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  width: 100%;
  border-radius: 5px;
  cursor: pointer;
  position: relative;

  &:hover {
    transition: all 0.2s;
    box-shadow: 0px 0px 2px 1px #f1f1f1;
    transform: translate(0%, 1%);
  }
}

::v-deep .el-checkbox__input {
  display: flex;
  align-items: center;
  padding: 0px 5px;
}

::v-deep .el-checkbox__label {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0px 5px;
}

.note-box {
  color: #aaaaaa;
  margin: 5px 0px;
  line-height: 36px;
  height: 36px;
  width: 100%;
  padding: 2px;
  text-align: start;
  letter-spacing: 1px;
  /* 隐藏超出部分 */
  overflow: hidden;
  /* 显示省略号 */
  text-overflow: ellipsis;
  /* 允许文本换行 */
  white-space: normal;
}

.status-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10%;
}

.time-box {
  color: #aaaaaa;
  width: 20%;
}

.c-no-data {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  text-align: center;
  color: #aaaaaa;
}
</style>
